import React,{Component} from 'react';
import {ReactHeight} from 'react-height';
import Header from '../../../system/header/Header';
import {asyncSize,pageHeight} from 'pofod/window.size';
import './firstScreen.less';
import 'animate.css';
import PropTypes from 'prop-types';
import classNames from 'classnames';
const prefix = 'first-screen';
class FirstScreen extends Component{
    state={
      height:pageHeight,
      headerHeight:''
    };
    componentDidMount(){
        window.addEventListener('resize',()=>{
            this.setState({
                height:asyncSize().pageHeight
            })
        });
    };
    componentWillUnmount(){
        window.removeEventListener('resize',()=>{
            this.setState({
                height:asyncSize().pageHeight
            })
        });
    };
    getHeight = (height) =>{
      this.setState({
         headerHeight:height
      });
    };
    render(){
        let state = this.state;
        let {backgroundImg,title,content} = this.props;
        return(
            <div className={prefix} style={{minHeight:"431px",height:state.height,backgroundImage:`url(${backgroundImg})`}}>
                <ReactHeight onHeightReady={this.getHeight}>
                    <Header refName="custom" childNodes="custom-a" choseImgDisplay="none"/>
                </ReactHeight>
                <div className={classNames(prefix+"-content-container")} style={{height:(state.height-state.headerHeight)+'px'}}>
                    <div className={classNames(prefix+"-table",'animated','fadeInDown')}>
                        <h2 className="">{title}</h2>
                        <p className={prefix+'-content'}>{content}</p>
                    </div>
                </div>
            </div>
        )
    }
}
export default FirstScreen;
FirstScreen.propTypes = {
  backgroundImg:PropTypes.any.isRequired,
  title:PropTypes.string.isRequired,
  content:PropTypes.string.isRequired
};
